<template>
    <section class="modlude">

        <div>

            <div style="display: flex;
            justify-content: flex-end;margin: 10px;">
                <!-- <el-button type="primary" @click="gometer_type_config">仪表类型配置</el-button> -->
            </div>
            <div class="equi">
                <div v-if="isActive==1" class="chooseCommunity" style="position: static;">
                    <div class="community">
                        <div class="communityContent">
                            <el-tree :data="formData" :default-expanded-keys="[0]" :props='defaultProps'
                                :load="loadNode" node-key="id" :expand-on-click-node="false">
                                <div class="custom-tree-node" slot-scope="{ node, data }">
                                    <el-radio-group v-model="xqId" @change="changeRadio(data)">
                                        <el-radio :label="data.id"><span>{{ data.name }}</span></el-radio>
                                    </el-radio-group>
                                </div>

                            </el-tree>
                        </div>
                    </div>
                </div>
                <div v-if="isActive==2" class="chooseCommunity" style="position: static;">
                    <div class="community">
                        <div class="communityContent">
                            <el-tree ref="checkboxtree" :default-expanded-keys="[0]" :data="formData1" show-checkbox
                                node-key="id" :props="adddataProps" @check="adddatachangclick">

                            </el-tree>
                        </div>
                    </div>
                </div>

            </div>
            <!-- 右边 -->
            <div class="settingsEle" style="position: static;">
                <div style="display: flex;font-size: 16px;margin-top: -12px;margin-bottom: 15px;">
                    <div style="width: 10px;height: 10px;border-radius: 50%;background: #eee;margin: 5px 10px 0 20px;">
                    </div>
                    <span> {{isActive==1 && isbianji==1?'使用子系统':'勾选子系统'}} </span>
                </div>
                <el-form class="form_inline" label-width="200px" :model="formPush" ref="addformPush">
                    <div class="checkboxdiv">
                        <el-checkbox-group v-model="checkcodes" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="(city,index) in configList" :label="city.subsystemCode" :key="index">{{ city.subsystemCode
                                }} - {{ city.name }}</el-checkbox>
                        </el-checkbox-group>

                    </div>
                </el-form>
                <div v-if="isActive==1" style="text-align:center;margin-top:20px;">
                    <!-- && $root.btnControl.find(item=>item=='config_edit') -->
                    <el-button v-if="isbianji==1 && $root.btnControl.find(item=>item=='edit')" @click="bianji">编辑</el-button>
                    <el-button v-if="isbianji==2" @click="isbianji=1">返回</el-button>
                    <el-button v-if="isbianji==2" type="primary" @click="danbaocun">保存</el-button>
                    <!-- && $root.btnControl.find(item=>item=='config_edit') -->
                    <!-- <el-button v-if="isbianji==1 " @click="piliangbianji">批量编辑</el-button> -->
                </div>
                <div v-if="isActive==2" style="text-align:center;margin-top:20px;">
                    <el-button @click="isActive=1">返回</el-button>
                    <el-button type="primary" @click="danbaocun">保存</el-button>
                </div>
            </div>
        </div>

    </section>
</template>
<script>

    import { subsystembind, subsystemlistxqId, housetree, xqSelectList, orgTree, readingremindview, remindaddorupdate } from '../../url/api';
    export default {
        data() {
            return {
                configList: [],
                checkcodes: [],
                isbianji: 1,
                isActive: 1,
                option1: [],
                xqTree: [],
                formSearch: {
                    xqId: '',
                },
                formPush: {},
                //selsData: [],
                formData: [
                    //     {
                    //     children: [],
                    //     name: '集团所有项目',
                    //     id:0
                    // }
                ],//数据
                formData1: [{
                    // children: [],
                    // name: '所有房间',
                    // id: 0
                }],//数据
                total: 0,//数据总数
                dataTree: [],
                defaultProps: {
                    children: 'children',
                    label: 'name',
                },
                adddataProps: {
                    children: 'children',
                    label: 'name',
                },
                defaultProps2: {
                    children: 'children',
                    label: 'name',
                    value: 'id',
                    expandTrigger: 'hover', checkStrictly: true
                },
                xqId: '',
                xqIds: [],
                updata: [],
                houseIds: [],
                housecheckdata: [],
                xqName: '',
                danhouseId: '',
            }
        },
        methods: {
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                // this.checkAll = checkedCount === this.cities.length;
                // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            },
            gometer_type_config() {
                this.$router.push({
                    path: '/meter_type_config'
                })
            },
            danbaocun() {
                if(this.configList.length == 0){
                    this.$message("系统检测到您还未配置仪表类型，请先配置仪表类型！");
                    return;
                }

                let xqIds = ''

                // if (this.isActive == 1) {
                //     if (this.xqId == '') {
                //         this.$message("请选则项目！");
                //         return;
                //     }
                //     this.xqId = this.xqId * 1;
                //     xqIds.push(this.xqId);
                // }
                if (this.isActive == 1) {
                    if (this.xqId == '') {
                        this.$message("请勾选项目！");
                        return;
                    }
                    xqIds = this.xqId*1;
                }

                //console.log(xqIds);

                let params = {
                    xqId: xqIds,
                    subsystemCodes: this.checkcodes,
                }
                //console.log(params);
                this.$confirm("确定执行此操作吗？", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    subsystembind(params).then((res) => {
                        if (res.data.ok) {
                            this.$message({
                                message: '操作成功！',
                                type: 'success'
                            });
                            this.isbianji = 1;
                            this.isActive = 1;
                            this.xqId = '';
                            this.checkcodes = [];

                        } else {
                            this.$message('操作失败')
                        }

                    })
                }).catch(() => {

                });


            },

            bianji() {
                this.isbianji = 2
                // this.isActive = 2
                this.getxqtree();
            },
            piliangbianji() {
                this.isActive = 2
                this.checkcodes = []
                // let params = [this.formSearch.xqId]
                this.getxqtree();

            },

            adddatachangclick(data, ev) {//勾选监听
                //console.log("输出data,ev:", data, ev);
                let xqId = data.id;
                this.xqIds.push(xqId);
                ////console.log("房间选中数据:", this.housecheckdata);//
            },
            gogudinfeiyon_config() {
                this.$router.push({
                    path: '/gudinfeiyon_config'
                })
            },
            changeRadio(obj) {//勾选项目
                //console.log(obj)
                if (obj.id) {
                    this.xqId = obj.id
                    let params = {
                        xqId: obj.id
                    }
                    subsystemlistxqId(params).then((res) => {
                        if (res.data.ok) {
                            //console.log(res);
                            this.checkcodes = [];
                            let arry = JSON.parse(JSON.stringify(res.data.data));
                            arry.forEach(val => {
                                this.checkcodes.push(val.subsystemCode)
                            })
                            //console.log(this.configList);
                            // this.restoreArr = JSON.parse(JSON.stringify(res.data.data));
                        }
                    });

                }

            },

            loadNode(node, resolve) {
                // //debugger
                // //console.log(node, resolve)
                if (node.level == 0) {
                    return resolve(node.data);
                }
                let data1 = node.data.children || []
                let data2 = node.data.houses || []
                let data3 = [...data1, ...data2]
                // setTimeout(() => {
                //     const data = data3;
                //     resolve(data);
                // }, 500);
            },

            getxqtree() {
                xqSelectList({}).then((ress) => {//项目选择列表
                    //console.log(ress)
                    if (ress.data.ok) {
                        // res.data.data.children = [],
                        this.formData1 = ress.data.data;
                        // this.formData = ress.data.data;
                    }
                })
            },
            getInit() {//初始化列表
                let params = {
                    xqId: 0
                }
                subsystemlistxqId(params).then((res) => {
                    if (res.data.ok) {
                        //console.log(res);

                        this.configList = JSON.parse(JSON.stringify(res.data.data));
                        //console.log(this.configList);
                        // this.restoreArr = JSON.parse(JSON.stringify(res.data.data));
                    }
                });
                let org_tree = {
                    name: '',
                    status: 1
                }
                orgTree(org_tree).then((res) => {//获取组织列表
                    //console.log(res)
                    if (res.data.ok) {
                        this.dataTree = res.data.data
                        xqSelectList({}).then((ress) => {//项目选择列表
                            //console.log(ress)
                            if (ress.data.ok) {
                                // res.data.data.children = [],
                                this.formData = ress.data.data;

                            }
                        })
                    }
                })
            },
            selsChange: function (sels) {// 当选择项发生变化时会触发该事件
                //console.log(sels)
                this.selsData = sels
            },

        },
        mounted() {
            this.getInit()
        },

    }
</script>
<style scoped>
    @import '../../assets/mySelf.css';

    .checkboxdiv>>>.el-checkbox__label {
        font-size: 18px;
    }

    .checkboxdiv>>>.el-checkbox__inner {
        width: 20px;
        height: 20px;
        margin-top: -4px;
    }

    .checkboxdiv>>>.el-checkbox__inner::after {
        border: 3px solid #fff;
        border-left: 0;
        border-top: 0;
        left: 6px;
        top: 3px;
    }

    .chooseCommunity {
        float: left;
        min-width: 280px;
        /* background: #f6f8fb;
    border: 1px solid #e6e6e6; */
    }

    .chooseCommunity .communityContent {
        border: 1px solid #e6e6e6;
        height: 700px;
        margin-top: 10px;
    }

    .chooseCommunity .communityContent .list {
        padding-top: 10px;
    }

    .chooseCommunity .communityContent .orgName span:first-child {
        cursor: pointer;
    }

    .chooseCommunity .communityContent .orgName span:first-child.active {
        color: #507bea;
    }

    .chooseCommunity .communityContent ul li.communityList {
        display: block;
        padding-left: 20px;
        position: relative;
        line-height: 36px;
        font-size: 14px;
        cursor: pointer;
    }

    .chooseCommunity .communityContent ul li.communityList.active {
        color: #507bea;
    }

    .chooseCommunity .communityContent ul li.communityList .circle {
        position: absolute;
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #507bea;
        border-radius: 50%;
        top: 50%;
        left: 4px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .chooseCommunity .communityContent ul li.communityList .circle .line {
        position: absolute;
        top: 0;
        left: 50%;
        display: inline-block;
        height: 40px;
        width: 1px;
        background: #507bea;
        transform: translateX(-50%);
    }

    .chooseCommunity .communityContent ul li.communityList:last-child .circle .line {
        display: none;
    }

    .settingsEle {
        margin-left: 300px;
        /* background: #fff; */
        margin-top: 20px;
        padding: 10px 20px;
        height: 756px;
        overflow: auto;
    }
</style>
